<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    
    <style>
        #box {
           width: 200px;
           background-color: darkgoldenrod;
        }
 
        #message {
           width: 130px;
           height: 100px;
           margin: 30px;
           background-color: darkorchid;
 
        }
     </style>
     
     <script>
         // 关于如何阻止事件的冒泡
         // 就是点击子节点，会向上触发父节点。
         //如果在一个div中又包含了一个子div，这两个div都添加了事件，如果点击子div
         //我只希望处理这个子div的事件，我们不希望外层的div事件也执行，这个时候就要用到阻止冒泡
        $(function(){
        //   $("#message").click(function(event){
        //      alert("这是一个内层的div");
        //      event.stopPropagation(); //阻止事件冒泡的方法
        //   });
 
        //   $("#box").click(function(event){
        //      alert("这是一个外层的div");
        //      event.stopPropagation(); //阻止事件冒泡的方法
        //   });
 
        //   $("body").click(function(event){
        //      alert("这是一个body");
        //      event.stopPropagation(); //阻止事件冒泡的方法
        //   })


        $("#submit").click(function(event){
          var username =   $("#username").val();
          if(username==""){
             alert("不能为空值");
             //如何阻止默认的行为
             event.preventDefault();   //return false;
          }
         }) 
 
        }) 
     </script>
 </head>
 <body>
      <!-- <div id="box">
         这是一个外层的div
          <div id="message">
             这是一个内层的<div></div>
          </div>
      </div> -->

      <form action="test.html">
        username: <input type="text" id="username">
        <br>
        <input type="submit" value="提交" id="submit">
     </form>
 </body>
 </html>
